import React from "react";
import { Area } from '@ant-design/charts';
export default function SmoothBlueLineVisitChart(props) {
    let data = props.visitTrend?.length ? props.visitTrend: []   
    const config = {
        animation: {
            // 配置图表第一次加载时的入场动画
            appear: {
              animation: 'wave-in', // 动画效果 
              duration: 2000,  // 动画执行时间
            },
        },
        smooth: true,
        padding:[40,80,40,80],
        interactions: [{ type: 'element-active' }],
        state: {
          // 设置 active 激活状态的样式
          active: {
            animate: { duration: 100, easing: 'easeLinear' },
            style: {
              lineWidth: 2,
              stroke: '#fff',
            },
          },
        },
        data, 
        xField: 'month',
        yField: 'value', 
        color: '#2380FC', 
        point: {
          color: '#2380FC',
          size: 0,
          shape: 'cilcle',
          style: {
             
          }, 
        },  
        tooltip: { 
            // title:'访问人数',
            showCrosshairs: true,
            enterable: true,   
        }, 
        legend: {
            layout: 'horizontal',
            position: 'top'
        },
        title: {
            text:"123" 
        }, 
        subTickLine: {
            style: {
                count:200,
                fill: '#3784AA',
            } 
        }, 
        xAxis: {
            grid: {
              alignTick: false, 
              line: {
                style: {
                  stroke: '#3784AA', 
                  lineWidth: 1,
                  opacity: 1,
                  lineDash: [], 
                }, 
              }, 
            },  
        },
        yAxis: {
            grid: {
                line: {
                    style: {
                    stroke: '#3784AA', 
                    lineWidth: 1,
                    opacity: 1,
                    lineDash: [], 
                    }, 
                }
            },    
        },
        areaStyle: {
          fill: 'l(270) 0:#49B7FE00 0.5#49B7FE 1:#49B7FEff', 
        },
        lineStyle: {
          stroke: '#2380FC',
          lineWidth: 2,
          lineDash: [0,0],
          strokeOpacity: 1,
          shadowColor: 'black',  
        },
        meta: { 
          value: {
            alias: '访问人数',
          },
        },
      };
      return <Area {...config} />;
}